<!DOCTYPE html>
<html lang="en">
<?php
session_start();

?>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>什么都论</title>
</head>
<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        overflow-x: hidden;
        display: flex;
        align-items: center;
        flex-direction: column;
        background-color: #f4f6f9;
    }

    .header {

        position: sticky;
        height: 70px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        top: 0px;
        background-color: #fff;
        box-shadow: #ccc 0px 5px 20px 0px;
        z-index: 1;

        &>.logo {
            list-style: none;
            width: 200px;

            & .logo {
                width: 200px;
            }
        }

        &>.options {
            display: flex;
            list-style: none;

            & li {
                margin-right: 20px;
                padding: 10px;
                border-radius: 5px;
                font-size: 20px;
                color: #0327b3;
                cursor: pointer;

                &:hover {
                    color: #fff;
                    background-color: #2A4DD0;
                }

                &>a {
                    color: inherit;
                    text-decoration: none;
                }
            }
        }

        &>.login {
            width: 200px;
        }
    }


    .slogan {
        display: flex;
        height: 30vh;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        &>h1 {
            margin: 20px;
            font-size: 40px;
            z-index: -1;

            &>.letter {
                display: inline-block;
                /* margin: 5px; */
                /* letter-spacing: 0.5em; */
                /* font-weight: 600; */
                opacity: 0;
                position: relative;
            }
        }

        &>span {
            &>.letter1 {
                display: inline-block;
                opacity: 0;
            }
        }
    }

    .search-box {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: sticky;
        top: 150px;
        margin-bottom: 50px;
        z-index: 2;

        &>.search-input {
            border: 2px solid #ccc;
            border-radius: 5px 0 0 5px;
            padding: 10px;
            margin: 5px 0 5px 5px;
            height: 50px;
            width: 70%;
        }

        &>.search-btn {
            border: none;
            background-color: #2A4DD0;
            color: #FFF4A3;
            padding: 10px;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            width: 15%;
            height: 50px;
            font-size: 16px;
            font-weight: bold;

            &:hover {
                background-color: #041F9A;
                color: #FFEE60;
            }
        }
    }

    .li-user {
        max-height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        &>.image-box {
            display: flex;
            justify-content: center;
            align-items: center;

            &>.user-image {
                max-width: 70px;
                max-height: 30px;
            }
        }

        &>.username {
            margin: 0 5px;
            max-width: 100px;
            overflow-x: hidden;
            text-overflow: ellipsis;
        }
    }

    .main-container {
        width: 90%;
        max-width: 1400px;
        display: flex;
        gap: 20px;
        margin: 0 auto;
        padding: 20px;
    }

    .sidebar {
        width: 300px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .main {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0;
        margin-bottom: 50px;

        &>.post {
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;

            &:hover {
                transform: translateY(-5px);
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            }

            &>.post-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;

                &>.category {
                    /* background-color: #e6f7ff; */
                    /* color: #1890ff; */
                    border: 1px solid #f3da23;
                    background-color: #fdf6c4;
                    color: #2A4DD0;
                    font-weight: bold;
                    padding: 4px 8px;
                    border-radius: 4px;
                    font-size: 14px;
                }

                &>.post-info {
                    display: flex;
                    align-items: center;
                    color: #999;
                    font-size: 14px;

                    & .author {
                        display: flex;
                        align-items: center;
                        margin-right: 15px;

                        & img {
                            width: 24px;
                            height: 24px;
                            border-radius: 50%;
                            margin-right: 5px;
                        }
                    }

                    & .date {
                        margin-right: 15px;
                    }
                }
            }

            &>.post-title {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 10px;
                color: #333;

                &:hover {
                    color: #2A4DD0;
                    cursor: pointer;
                }
            }

            &>.post-content {
                height: 50px;
                color: #666;
                font-size: 16px;
                line-height: 1.6;
                margin-bottom: 15px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;

            }

            &>.post-footer {
                display: flex;
                justify-content: flex-end;
                align-items: center;
                color: #999;
                font-size: 14px;

                & .stat {
                    display: flex;
                    align-items: center;
                    margin-left: 15px;

                    & i {
                        margin-right: 5px;
                    }
                }
            }
        }
    }

    .sidebar-card {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 15px;

        &>.card-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            padding-bottom: 10px;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;

            & .more {
                font-size: 12px;
                font-weight: normal;
                color: #1890ff;
                cursor: pointer;

                &:hover {
                    text-decoration: underline;
                }
            }
        }
    }

    .hot-topics {
        & .topic-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px dashed #eee;

            &:last-child {
                border-bottom: none;
            }

            & .rank {
                width: 20px;
                height: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #f0f0f0;
                color: #999;
                font-size: 12px;
                border-radius: 3px;
                margin-right: 10px;

                &.top1 {
                    background-color: #ff4d4f;
                    color: #fff;
                }

                &.top2 {
                    background-color: #ff7a45;
                    color: #fff;
                }

                &.top3 {
                    background-color: #ffa940;
                    color: #fff;
                }
            }

            & .topic-title {
                flex: 1;
                font-size: 14px;
                color: #333;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                &:hover {
                    color: #1890ff;
                    cursor: pointer;
                }
            }

            & .topic-stat {
                color: #999;
                font-size: 12px;
                margin-left: 10px;
            }
        }
    }

    .create-post-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
        background-color: #2A4DD0;
        color: #FFF4A3;
        font-size: 16px;
        font-weight: bold;
        border-radius: 10px;
        cursor: pointer;
        transition: background-color 0.2s ease;

        &:hover {
            background-color: #0327B3;
        }
    }

    .forum-categories {
        & .category-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px dashed #eee;

            &:last-child {
                border-bottom: none;
            }

            & .category-icon {
                width: 36px;
                height: 36px;
                background-color: #f5f5f5;
                border-radius: 5px;
                margin-right: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #1890ff;
                font-size: 18px;
            }

            & .category-info {
                flex: 1;

                & .category-name {
                    font-size: 14px;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 2px;

                    &:hover {
                        color: #1890ff;
                        cursor: pointer;
                    }
                }

                & .category-desc {
                    font-size: 12px;
                    color: #999;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            & .post-count {
                color: #999;
                font-size: 12px;
            }
        }
    }

    .announcement {
        & .announcement-item {
            display: flex;
            align-items: center;
            padding: 8px 0;

            & .announcement-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background-color: #ff4d4f;
                margin-right: 10px;
                flex-shrink: 0;
            }

            & .announcement-content {
                flex: 1;
                font-size: 14px;
                color: #333;
                cursor: pointer;

                &:hover {
                    color: #1890ff;
                }
            }

            & .announcement-date {
                color: #999;
                font-size: 12px;
                margin-left: 10px;
            }
        }
    }

    .active-users {
        & .users-list {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -5px;

            & .user-item {
                width: 25%;
                padding: 5px;
                text-align: center;
                cursor: pointer;

                & .user-avatar {
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    margin-bottom: 5px;
                }

                & .user-name {
                    font-size: 12px;
                    color: #333;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;

                    &:hover {
                        color: #1890ff;
                        cursor: pointer;
                    }
                }
            }
        }
    }

    .forum-stats {
        & .stats-list {
            display: flex;
            justify-content: space-around;
            text-align: center;

            & .stat-item {
                & .stat-value {
                    font-size: 20px;
                    font-weight: bold;
                    color: #1890ff;
                    margin-bottom: 5px;
                }

                & .stat-label {
                    font-size: 12px;
                    color: #999;
                }
            }
        }
    }

    .tab-container {
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        margin-bottom: 20px;

        & .tab-header {
            display: flex;
            border-bottom: 1px solid #eee;

            & .tab-item {
                flex: 1;
                text-align: center;
                padding: 15px 0;
                cursor: pointer;
                font-size: 15px;
                color: #666;
                position: relative;

                &.active {
                    color: #2A4DD0;
                    font-weight: bold;

                    &::after {
                        content: '';
                        position: absolute;
                        left: 50%;
                        transform: translateX(-50%);
                        bottom: 0;
                        width: 60px;
                        height: 3px;
                        background-color: #2A4DD0;
                        border-radius: 3px;
                    }
                }

                &:hover {
                    color: #1890ff;
                }
            }
        }
    }

    /* 退出登录按钮样式开始 */
    .logout {
        width: 100%;
        position: absolute;
        top: 80px;
    }

    .logout button {
        width: 100%;
        height: 50px;
        background: red;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.5s ease;
        float: right;
        display: none;
        margin-top: -80px;
    }

    .logout button a {
        text-decoration: none;
        color: #fff;
        font-size: 16px;
    }

    .li-user:hover .logout button {
        width: 100%;
        display: inline;
    }

    /* 退出登录按钮样式结束 */
</style>


<body>
    <div class="header">
        <ul class="logo">
            <li>
                <img src="../image/logo.png" alt="" class="logo">
            </li>
        </ul>
        <ul class="options">
            <li><a href="./">论坛首页</a></li>
            <li><a href="./list.php">板块</a></li>
            <li><a href="./me.php">我的信息</a></li>
            <?php
            if(isset($_SESSION['role'])){
                if ($_SESSION['role'] != 'user') {
                echo "<li><a href='../../bms/views/indexBms.php'>后台管理</a></li>";
            }
            }
            
            ?>
            <li class="li-user">
                <div class='image-box'>
                    <img src="<?php
                    if (isset($_SESSION['head'])) {
                        echo '../image/head/' . $_SESSION['head'];
                    } else {
                        echo '../image/head/Default1.jpg';
                    }
                    ?>" alt="user" class='user-image'
                        onerror='this.onerror=null; this.src="../image/head/Default.jpg";'>
                </div>
                <?php
                if (isset($_SESSION['username'])) {
                    echo "<a>" . $_SESSION['username'] . "</a>";
                    echo <<<EOF
                    <div class="logout">
                    <button><a onclick="confirm('确认退出登录吗？')?href='../control/doLogin.php?action=logout':''">退出登录</a></button>
                </div>
EOF;
                } else {
                    echo "<a href='login.php'>登录</a>";
                }
                ?>

            </li>
        </ul>

    </div>
    <div class="slogan">
        <h1>「什么都论坛——聊透世界的AB面」</h1>
        <span>冷知识、热话题、神吐槽……这里总有人接得住你。</span>
    </div>
    <div class="search-box">
        <input type="text" class="search-input" <?php if (isset($_GET['search'])) {
            echo "value='" . $_GET['search'] . "'";
        } ?>
            placeholder="搜索主题、内容">
        <button class="search-btn">搜索</button>
    </div>



    <div class="main-container">
        <div class="main">
            <div class="tab-container">
                <div class="tab-header">
                   <div class="tab-item <?php if (!isset($_GET['tab'])) echo 'active'; ?>" onclick="window.location.href='index.php'">最新帖子</div>
                    <div class="tab-item <?php if (isset($_GET['tab']) && $_GET['tab']=='top') echo 'active'; ?>" onclick="window.location.href='index.php?tab=top'">最热帖子</div>
                    <div class="tab-item <?php if (isset($_GET['tab']) && $_GET['tab']=='good') echo 'active'; ?>" onclick="window.location.href='index.php?tab=good'">精华帖子</div>
                    <!-- <div class="tab-item">待回复</div> -->
                </div>
            </div>

            <?php
            require '../model/topicDao.php';
            if (!isset($_GET['search'])) {
               if(isset($_GET['tab']) && $_GET['tab'] == 'hot'){
                    $data = get_hot_topics_info();
                }else if(isset($_GET['tab']) && $_GET['tab'] == 'good'){
                    $data = get_good_topics_info();   
                }else{
                    $data = get_all_topics_info();
                }
            } else {
                $data = get_search_topics_info($_GET['search']);
            }
            foreach ($data as $value) {
                $topicId = $value['topicId'];
                $boardName = $value['boardName'];
                $title = $value['title'];
                $content = $value['content'];
                $publishTime = $value['publishTime'];
                $userName = $value['uName'];
                $headImg = $value['head'];
                $likes = $value['likes'];
                $replyNumber = $value['replyNumber'];
                echo <<<EOF
                    <div class="post" onclick="window.location.href='PostDetails.php?topic_id=$topicId';">
                        <div class="post-header">
                            <div class="category">$boardName</div>
                                <div class="post-info">
                                    <div class="author">
                                        <img src="../image/head/$headImg" alt="用户头像">
                                        <span>$userName</span>
                                    </div>
                                    <div class="date">$publishTime</div>
                                </div>
                            </div>
                        <div class="post-title">$title</div>
                        <div class="post-content">$content</div>

                        <div class="post-footer">
                            <!-- 浏览 -->
                            
                            <!-- 评论 -->
                            <div class="stat">
                                <svg t="1747793891273" class="icon" viewBox="0 0 1114 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1009" width="22" height="22">
                                    <path
                                        d="M412.43236215 880.21486555h-7.85199339c-19.62998309-3.92599633-35.33396983-15.70398675-43.18596322-31.40797352l-27.48197645-66.74194336h-62.81594705c-70.66793969 0-129.55789039-58.88994998-129.55788966-129.55789038V271.68538194c0-74.59393674 58.88994998-129.55789039 129.55788966-129.55789039h526.08355351c70.66793969 0 129.55789039 54.96395365 129.55789039 129.55789039v380.82167634c0 70.66793969-58.88994998 129.55789039-129.55789039 129.55789039h-282.6717602l-58.88994997 78.51993306c-7.85199338 11.77798971-23.55598013 19.62998309-43.18596323 19.62998381z m-141.33588011-679.19742403c-39.25996689 0-70.66793969 31.40797353-70.66793967 70.66794042v380.82167635c0 39.25996689 31.40797353 70.66793969 70.66793967 70.66794039h102.07591322l39.25996689 94.22391984 70.66794042-94.22391984h310.15373665c39.25996689 0 70.66793969-31.40797353 70.66793969-70.66794039V271.68538194c0-39.25996689-31.40797353-70.66793969-70.66793969-70.66794042H271.09648204zM346.41018531 337.51125953h374.80181521a30.71001833 30.71001833 0 0 1 0 61.4418473H346.41018531a30.71001833 30.71001833 0 1 1 0-61.4418473z m0.23992193 202.23245021h190.06186059a30.97175162 30.97175162 0 1 1 0 61.89988056H346.67191787a30.97175162 30.97175162 0 1 1 0-61.89988056z" fill="#2c2c2c" p-id="1010"></path>
                                </svg>
                                $replyNumber
                            </div>
                            <!-- 点赞 -->
                            <div class="stat">
                                <svg t="1747792497347" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="947" width="18" height="18">
                                <path
                                        d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" p-id="948" fill="#2c2c2c"></path>
                                </svg>
                                $likes
                            </div>
                        </div>
                        </div>
                EOF;
            }
            ?>

        </div>
        <div class="sidebar">
            <div class="create-post-btn" onclick="location.href='./post.php'">
                发布新帖
            </div>
            <!-- 热门帖子 -->
            <div class="sidebar-card hot-topics">
                <div class="card-title">
                    <span>热门帖子</span>
                    <span class="more" onclick="window.location.href='index.php?tab=top'">更多</span>
                </div>
                <?php
                $hotTopics =get_hot_topics_info();
                $i=1;
                foreach ($hotTopics as $value) {
                    echo <<<EOF
                    <div class="topic-item" onclick="location.href='./PostDetails.php?topic_id=$value[topicId]'">
                        <div class="rank top$i">$i</div>
                        <div class="topic-title">$value[title]</div>
                        <div class="topic-stat">$value[likes]</div>
                    </div>
EOF;                 
                 $i++;   
                }
                ?>
               
            </div>
            <!-- 论坛公告 -->
            <div class="sidebar-card announcement">
                <div class="card-title">
                    <span>论坛公告</span>
                    <span class="more">更多</span>
                </div>
                <div class="announcement-item">
                    <div class="announcement-dot"></div>
                    <div class="announcement-content">论坛将于6月1日进行系统升级维护</div>
                    <div class="announcement-date">05-25</div>
                </div>
                <div class="announcement-item">
                    <div class="announcement-dot"></div>
                    <div class="announcement-content">新增用户积分制度和等级体系</div>
                    <div class="announcement-date">05-18</div>
                </div>
                <div class="announcement-item">
                    <div class="announcement-dot"></div>
                    <div class="announcement-content">发布优质内容获得官方奖励活动开启</div>
                    <div class="announcement-date">05-10</div>
                </div>
            </div>
            <!-- 热门板块 -->
            <div class="sidebar-card forum-categories">
                <div class="card-title">
                    <span>热门板块</span>
                    <span class="more">全部</span>
                </div>
                <div class="category-item">
                    <div class="category-icon">📱</div>
                    <div class="category-info">
                        <div class="category-name">数码科技</div>
                        <div class="category-desc">分享最新科技产品和资讯</div>
                    </div>
                    <div class="post-count">3.2k</div>
                </div>
                <div class="category-item">
                    <div class="category-icon">🍲</div>
                    <div class="category-info">
                        <div class="category-name">美食天地</div>
                        <div class="category-desc">分享美食、菜谱和烹饪技巧</div>
                    </div>
                    <div class="post-count">2.8k</div>
                </div>
                <div class="category-item">
                    <div class="category-icon">🏞️</div>
                    <div class="category-info">
                        <div class="category-name">旅游摄影</div>
                        <div class="category-desc">分享旅行经历和摄影作品</div>
                    </div>
                    <div class="post-count">2.5k</div>
                </div>
                <div class="category-item">
                    <div class="category-icon">💻</div>
                    <div class="category-info">
                        <div class="category-name">编程开发</div>
                        <div class="category-desc">编程学习和技术交流</div>
                    </div>
                    <div class="post-count">2.3k</div>
                </div>
            </div>
            <!-- 活跃用户 -->
            <div class="sidebar-card active-users">
                <div class="card-title">
                    <span>活跃用户</span>
                    <span class="more">更多</span>
                </div>
                <div class="users-list">
                    <?php
                    $users = get_active_users();
                    $num = 8;
                    if (count($users) < 8) {
                        $num = count($users);
                    }
                    for ($i = 0; $i < $num; $i++) {
                        $head = $users[$i]['head'];
                        $userName = $users[$i]['uName'];
                        $uid=$users[$i]['uId'];
                        echo <<<EOF
                        <div class="user-item" onclick="window.location.href='./me.php?userId=$uid'">
                        <img src="../image/head/$head" alt="用户头像" class="user-avatar">
                        <div class="user-name">$userName</div>
                    </div>
EOF;
                    }
                    ?>
                </div>
            </div>

        </div>
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
<script>
    const { animate, utils, stagger, createSpring } = anime;
    let becomeSmaller = false;
    if (!becomeSmaller) {
        document.querySelector('.search-box').style.width = '50vw';
    }
    // 监听滚动事件，根据滚动位置调整搜索框的大小和位置
    window.addEventListener('scroll', () => {
        const scrollY = window.scrollY;
        //console.log(scrollY);
        if (scrollY >= 170 && !becomeSmaller) {
            becomeSmaller = true;
            animate('.search-box', {
                width: [
                    { to: '30vw', duration: 500, ease: 'inOutExpo' },
                ],
                x: [
                    { to: -200, duration: 500, ease: 'inOutExpo' },
                ],
                y: [
                    { to: -145, duration: 500, ease: 'inOutExpo' },
                ]

            })
        } else if (scrollY < 170 && becomeSmaller) {
            becomeSmaller = false;
            animate('.search-box', {
                width: [
                    { to: '50vw', duration: 500, ease: createSpring() },
                ],
                x: [
                    { to: 0, duration: 500, ease: createSpring() },
                ],
                y: [
                    { to: 0, duration: 500, ease: createSpring() },
                ]

            })
        }

    });
    // 头部动画，使头部从上方移动到初始位置
    animate('.header', {

        translateY: [
            { from: -70, to: 0, duration: 1000, ease: createSpring() }
        ],

    });
    animate('.logo', {
        translateX: [
            { from: -200, to: 0, duration: 1000, ease: createSpring() }
        ],
        delay: 500,

    });
    animate('.options li', {
        translateX: [
            { from: 1000, to: 0, duration: 1000, ease: 'inOutExpo', delay: function (el, i) { return 500 + 200 * i; } }
        ],
    })
    // 口号动画，逐个字符从上方淡入到初始位置
    let text = document.querySelector('.slogan h1');
    let text1 = document.querySelector('.slogan span');
    text.innerHTML = text.innerText.replace(/\S/g, '<span class="letter">$&</span>');
    text1.innerHTML = text1.innerText.replace(/\S/g, '<span class="letter1">$&</span>');
    let textIndex = 0;
    let textList = [
        '燃料已加满——你的每句话都是火花',
        '我们不生产争论，我们只是灵感的搬运工',
        '今日成就：把楼从美食歪到外星文明',
        '冷知识、热话题、怪脑洞——这里没有“超纲”这个词',
        '当别人说‘聊够了’，我们刚掏出40米脑洞',
        '别让好奇心过期',
        '冷知识、热话题、神吐槽……这里总有人接得住你'
    ]
    function changeText() {
        text1.innerHTML = textList[textIndex].replace(/\S/g, '<span class="letter1">$&</span>');
        textIndex = (textIndex + 1) % textList.length;
    }
    animate('.letter', {
        translateY: [
            { from: -100, to: 0, duration: 2000 }
        ],
        opacity: [
            { from: 0, to: 1, duration: 2000 }
        ],
        ease: createSpring(),
        delay: stagger(50),
    })
    function text1Anime() {
        animate('.letter1', {
            translateX: [
                { from: 200, to: 0, duration: 1000 },
                { from: 0, to: 0, duration: 1000 },
                { from: 0, to: -200, duration: 1000 },
            ],
            opacity: [
                { from: 0, to: 1, duration: 1000 },
                { from: 1, to: 1, duration: 1000 },
                { from: 1, to: 0, duration: 1000 },
            ],
            ease: 'inOutExpo',
            delay: stagger(10),
            onComplete: () => {
                changeText();
                text1Anime();
            }
        })
    }
    text1Anime();
    animate('.post', {
        marginTop: [
            { from: 1000, to: 0, duration: 500 },
        ],
        delay: stagger(80)
    })
    //上面的js都是动画
    ///////////////////////////////////////////////////////////////////////
    //////////////////////////////////////////////////////////////////////
    //
    let searchInput = document.querySelector('.search-input');
    let searchBtn = document.querySelector('.search-btn');
    searchInput.addEventListener('change', () => {
        window.location.href = './?search=' + searchInput.value;
    });
    searchBtn.addEventListener('click', () => {
        window.location.href = './?search=' + searchInput.value;
    })
</script>

</html>